<template>
    <div class="newmail">
        <div class="sender">
            <span class="imp">发件人</span>
            <input type="text" name="" id="" v-model="send">

            <div class="last">
                <a v-if="!hasChaoSong" @click="hasChaoSong=true">抄送</a>
                <a v-if="!hasMiSong" @click="hasMiSong=true">密件抄送</a>
            </div>

        </div>

        <div class="receiver">
            <span class="imp">收件人</span>
            <input type="text" name="" id="" v-model="recv">

            <div class="last">
            </div>
        </div>

        <div class="receiver" v-if="hasChaoSong">
            <span class="imp">抄送</span>
            <input type="text" name="" id="">

            <div class="last">
            </div>
        </div>

        <div class="receiver" v-if="hasMiSong">
            <span class="imp">密件抄送</span>
            <input type="text" name="" id="">

            <div class="last">
            </div>
        </div>

        <div class="theme">
            <input type="text" name="" id="" placeholder="添加主题" v-model="theme">
        </div>
        <div class="content" ref='editor' style="height: 300px; overflow-y: hidden;"></div>
        <div class="toolbars">
            <div class="send-btn">
                <a class="send" @click="syncHTML">发送</a>
                <i class="el-icon-arrow-down"></i>
            </div>

            <a class="abandon-btn">放弃</a>

            <el-upload class="upload-demo" action="http://172.16.192.31:8000/file/" multiple :limit="3"
                :show-file-list="false" :on-success="handleUploadSuc" :on-error="handleUploadErr"
                :on-exceed="handleExceed">
                <i class="el-icon-paperclip"></i>
            </el-upload>
            <span class="uploadfilename" v-if="uploadfile.name"> {{uploadfile.name}} <i class="el-icon-close"
                    @click="uploadfile={}"></i> </span>

        </div>
    </div>
</template>
<script>
    import WangEditor from "wangeditor";
    import { toRefs, ref, reactive, onMounted, onBeforeUnmount } from "vue";
    import { ElMessage } from "element-plus";
    import { ElNotification } from 'element-plus';

    export default {
        name: "MailPane",
        setup() {
            const editor = ref(null);
            const state = reactive({
                send: "hudejie@outlook.com",
                recv: "smithxu@163.com,jack1668@163.com",
                theme: "",
                hasChaoSong: false,
                hasMiSong: false,
                uploadfile: {},
                dialogVisible: false,
                num: 0
            });

            const content = reactive({
                html: "",
                text: "",
            });
            let instance;
            onMounted(() => {
                instance = new WangEditor(editor.value);
                instance.config.zIndex = 1;
                instance.create();

                console.log("----------------------")
            });
            onBeforeUnmount(() => {
                instance.destroy();
                instance = null;
            });

            const syncHTML = () => {

                state.dialogVisible = true;

                content.html = instance.txt.html();
                console.log(content.html);

                if (content.html !== '')
                    ElMessage.success(content.html);
            };

            const handleUploadSuc = (response, file, fileList) => {
                console.log(response, file, fileList);

                ElNotification({
                    title: file.name,
                    message: '上传成功',
                    type: 'success',
                });

                state.uploadfile = file;
            };

            const handleUploadErr = (err, file, fileList) => {
                console.log(err, file, fileList);

                ElNotification({
                    title: file.name,
                    message: '上传失败',
                    type: 'error',
                });
            };

            return {
                ...toRefs(state),
                syncHTML,
                editor,
                content,
                handleUploadSuc,
                handleUploadErr
            };
        },
    }
</script>
<style scoped>
    .newmail {
        height: 95%;
        border-radius: 5px;
        border: 1px solid #EDEBE9;
        background: #FFF;
        margin: 10px;
    }

    .sender,
    .receiver,
    .theme {
        height: 55px;
        border-bottom: 1px solid #EDEBE9;
        display: flex;
    }

    input {
        background: #fff;
    }

    .sender .imp,
    .receiver .imp {
        background: #EFF6FC;
        width: 100px;
        height: 35px;
        display: inline-block;
        line-height: 35px;
        border-radius: 5px;
        color: #005A9E;
        font-weight: 800;
        margin-left: 10px;
        margin-top: 10px;
        float: left;
    }

    .sender .last,
    .receiver .last {
        float: right;
        width: 160px;
        height: 55px;
        line-height: 55px;
    }

    .sender .last a {
        margin-left: 10px;
        font-size: small;
        color: #005A9E;
    }

    .sender .last a:hover {
        color: #357cb3;
    }

    input {
        float: left;
        height: 35px;
        line-height: 35px;
        margin-left: 10px;
        margin-top: 10px;
        margin-right: 10px;
        padding: 0;
        box-sizing: border-box;
        outline: none;
        vertical-align: middle;
        border: none;
        width: 100%;
    }

    .toolbars {
        height: 50px;
        background: #F3F2F1;
        text-align: left;
    }

    .send-btn {
        display: inline-block;
        height: 30px;
        margin-top: 10px;
        margin-left: 5px;
        margin-right: 10px;
    }

    .send-btn a {
        display: inline-block;
        height: 30px;
        width: 65px;
        background: #0078D4;
        color: #fff;
        line-height: 30px;
        text-align: center;
        font-weight: 800;
    }

    .send-btn a:hover,
    .send-btn i:hover {
        background: #106EBE;
    }

    .send-btn i {
        height: 30px;
        width: 30px;
        background: #0078D4;
        color: #fff;
        line-height: 30px;
        text-align: center;
    }

    .abandon-btn {
        display: inline-block;
        height: 30px;
        width: 70px;
        border: 1px solid #333;
        color: #000;
        font-weight: 800;
        text-align: center;
        line-height: 30px;
        background: #fff;
    }

    .abandon-btn:hover {
        background: #E1DFDD;
    }

    .content {
        text-align: left;
    }

    .upload-demo {
        display: inline-block;
        margin-left: 10px;
        font-size: 20px;
    }

    .uploadfilename {
        margin-left: 10px;
        color: #666666;
    }

    .uploadfilename i:hover {
        color: rgb(230, 71, 71)
    }
</style>